<template>
  <div class="app-container dashboard-container">
    <el-button type="primary" @click="goToAnnouncement" style="margin-bottom: 20px;">
      去公告管理页面
    </el-button>
    <el-row :gutter="20" class="dashboard-stat-row" style="margin-bottom: 24px;">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>农户总数</span>
              <el-tag size="small">总计</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">2,590</div>
            <div class="card-footer">
              <span class="trend-text">
                <el-icon><ArrowUp /></el-icon>
                <span>12% 较上月</span>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>商品总数</span>
              <el-tag size="small" type="success">总计</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">12,480</div>
            <div class="card-footer">
              <span class="trend-text">
                <el-icon><ArrowUp /></el-icon>
                <span>8% 较上月</span>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>订单总数</span>
              <el-tag size="small" type="warning">总计</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">28,065</div>
            <div class="card-footer">
              <span class="trend-text">
                <el-icon><ArrowUp /></el-icon>
                <span>15% 较上月</span>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <el-card shadow="hover" class="stat-card">
          <template #header>
            <div class="card-header">
              <span>总销售额</span>
              <el-tag size="small" type="danger">总计</el-tag>
            </div>
          </template>
          <div class="card-body">
            <div class="card-value">￥1,209,347</div>
            <div class="card-footer">
              <span class="trend-text">
                <el-icon><ArrowUp /></el-icon>
                <span>11% 较上月</span>
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="24" class="dashboard-main-row">
      <el-col :span="24">
        <el-card class="dashboard-card" shadow="hover">
          <!-- 销售趋势内容 -->
          <div class="chart-card">
            <div class="card-header">
              <span>销售趋势</span>
              <el-radio-group v-model="saleTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">销售趋势图表</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="dashboard-card" shadow="hover">
          <!-- 商品类别分布内容 -->
          <div class="chart-card">
            <div class="card-header">
              <span>商品类别分布</span>
              <el-button size="small" text>查看详情</el-button>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">商品类别饼图</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="dashboard-card" shadow="hover">
          <!-- 最新订单内容 -->
          <div class="table-card">
            <div class="card-header">
              <span>最新订单</span>
              <el-button size="small" type="primary" plain>查看所有</el-button>
            </div>
            <el-table :data="latestOrders" style="width: 100%" :header-cell-style="{ background: '#f5f7fa' }">
              <el-table-column prop="id" label="订单号" width="180" />
              <el-table-column prop="customer" label="客户" />
              <el-table-column prop="amount" label="金额" />
              <el-table-column prop="status" label="状态">
                <template #default="scope">
                  <el-tag :type="getOrderStatusType(scope?.row?.status)">
                    {{ scope?.row?.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="date" label="日期" />
            </el-table>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="dashboard-card" shadow="hover">
          <!-- 系统通知内容 -->
          <div class="notification-card">
            <div class="card-header">
              <span>系统通知</span>
              <el-button size="small" text>全部已读</el-button>
            </div>
            <div class="notification-list">
              <div v-for="(item, index) in notifications" :key="index" class="notification-item">
                <div class="notification-icon">
                  <el-icon :size="20" :color="item.color"><component :is="item.icon" /></el-icon>
                </div>
                <div class="notification-content">
                  <div class="notification-title">{{ item.title }}</div>
                  <div class="notification-time">{{ item.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 销售时间范围
const saleTimeRange = ref('month')

// 模拟最新订单数据
const latestOrders = ref([
  { id: 'SO-2023120501', customer: '张三', amount: '¥1,280.00', status: '已完成', date: '2023-12-05' },
  { id: 'SO-2023120502', customer: '李四', amount: '¥3,420.00', status: '待发货', date: '2023-12-05' },
  { id: 'SO-2023120503', customer: '王五', amount: '¥860.00', status: '待付款', date: '2023-12-05' },
  { id: 'SO-2023120504', customer: '赵六', amount: '¥2,150.00', status: '已取消', date: '2023-12-04' },
  { id: 'SO-2023120505', customer: '钱七', amount: '¥1,590.00', status: '已完成', date: '2023-12-04' }
])

// 模拟通知数据
const notifications = ref([
  { title: '新增25个农户注册', time: '10分钟前', icon: 'User', color: '#409EFF' },
  { title: '系统更新完成', time: '30分钟前', icon: 'Setting', color: '#67C23A' },
  { title: '新订单提醒', time: '1小时前', icon: 'ShoppingCart', color: '#E6A23C' },
  { title: '服务器警报', time: '2小时前', icon: 'Warning', color: '#F56C6C' },
  { title: '每日数据报告', time: '5小时前', icon: 'DataLine', color: '#909399' }
])

// 获取订单状态对应的标签类型
const getOrderStatusType = (status: string): string => {
  const statusMap: Record<string, string> = {
    '已完成': 'success',
    '待发货': 'warning',
    '待付款': 'info',
    '已取消': 'danger'
  }
  return statusMap[status] || 'info'
}

const router = useRouter()
const goToAnnouncement = () => {
  router.push('/content/announcement')
}
</script>

<style scoped lang="scss">
.dashboard-stat-row {
  margin-bottom: 24px;
}
.stat-card {
  margin-bottom: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  background: #fff;
  transition: box-shadow 0.2s;
  padding: 24px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 16px;
}
.card-body {
  padding: 10px 0;
  .card-value {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  .card-footer {
    display: flex;
    justify-content: space-between;
    .trend-text {
      display: flex;
      align-items: center;
      color: #67C23A;
      font-size: 14px;
      .el-icon {
        margin-right: 5px;
      }
    }
  }
}
.dashboard-main-row {
  margin-top: 24px;
}
.dashboard-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
  min-height: 260px;
  background: #fff;
  transition: box-shadow 0.2s;
  padding: 24px;
  margin-bottom: 0;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 16px;
}
.chart-container {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-placeholder {
  color: #909399;
  font-size: 16px;
}
.table-card {
  margin-top: 0;
}
.notification-card {
  margin-top: 0;
}
.notification-list {
  .notification-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #EBEEF5;
    &:last-child {
      border-bottom: none;
    }
    .notification-icon {
      margin-right: 10px;
      display: flex;
      align-items: center;
    }
    .notification-content {
      flex: 1;
      .notification-title {
        font-size: 14px;
        margin-bottom: 5px;
      }
      .notification-time {
        font-size: 12px;
        color: #909399;
      }
    }
  }
}
@media (max-width: 992px) {
  .dashboard-main-row {
    flex-direction: column;
  }
  .dashboard-card {
    margin-bottom: 24px;
  }
}
</style> 